<div class="prompt-info">
  <span class="tab-nav" [ngClass]="{'active': status === '新建拼团'}" (click)="choseType('新建拼团')">新建拼团</span><span
  class="tab-nav" [ngClass]="{'active': status === '未开始'}" (click)="choseType('未开始')">未开始</span><span
  class="tab-nav" [ngClass]="{'active': status === '进行中'}" (click)="choseType('进行中')">进行中</span><span
  class="tab-nav no_extra" [ngClass]="{'active': status === '已结束'}" (click)="choseType('已结束')">已结束</span>
</div>

<div *ngIf="!editSpell">
  <div *ngIf="status == '新建拼团'">
    <form #createPennyForm="ngForm">
      <div class="module">
        <div class="line">
          <div class="title">活动名称</div>
          <div class="content">
            <input type="text" class="form-control input-width" name="activity_name" [(ngModel)]="addPennyParams.name" required>
          </div>
        </div>
        <div class="line" *ngFor="let item of prize;let i = index;">
          <div class="title">奖品设置
            <div *ngIf="i+1==prize.length&&prize.length!=1">
              <button class="btn btn-default" (click)="prize.splice(i,1)">删除</button>
            </div>
          </div>
          <div class="content">
            <div class="sec-line">
              <div class="sec-title">{{item.class}} :</div>
              <div class="sec-content" *ngIf="!item.type">
                <a href="javascript:;" class="add-goods" (click)="showPrizeModal(i)">
                  <i class="iconfont icon-add"></i>添加奖品
                </a>
              </div>
              <div class="sec-content" *ngIf="item.type===1&&!!item.goods">
                <a href="javascript:;" class="add-goods" (click)="showPrizeModal(i)">
                  <img src="{{item.goods?aliyunOssOutputUrl+'/'+item.goods.first_picture:''}}" alt="">
                  <span>{{item.goods?.name}}</span>
                </a>
              </div>
              <div class="sec-content" *ngIf="item.type===2&&!!item.coupon">
                <a href="javascript:;" class="add-coupon" (click)="showPrizeModal(i)">
                  <span class="type">卡券:</span>
                  <span>ID: {{item.coupon?.id}}</span>
                  <span>名称: {{item.coupon?.card_coupons_name}}</span>
                  <span>有效期:
                    <span *ngIf="item.coupon.term_of_validity_type === 1">{{item.coupon.term_of_validity_time_start.substring(0,10)}}至{{item.coupon.term_of_validity_time_end.substring(0,10)}}</span>
                    <span *ngIf="item.coupon.term_of_validity_type === 2">领取{{item.coupon.term_of_validity_start}}天后生效 有效期{{item.coupon.term_of_validity}}天</span>
                  </span>
                </a>
              </div>
            </div>
            <div class="sec-line" *ngIf="item.type === 1">
              <div class="sec-title">规格 :</div>
              <div class="sec-content">
                <span class="sku" *ngFor="let ite of item.goods_sku" title="{{ite.describe||ite.name}}" (click)="checkedSku(item.goods_sku,ite)">  <input type="radio" name="sku_radio[{{i}}]" [checked]="ite.selected">{{ite.describe||ite.name}}</span>
              </div>
            </div>
            <div class="sec-line">
              <div class="sec-title">数量 :</div>
              <div class="sec-content">
                <input type="number" class="form-control" name="number[{{i}}]" #number="ngModel" [(ngModel)]="item.number" required>
                <p [hidden]="number?.valid||number?.pristine" class="alert alert-danger">请正确输入数量</p>
              </div>
            </div>
            <div class="sec-line" *ngIf="i+1==prize.length&&prize.length!=5">
              <button class="btn btn-default mt10" (click)="addAwards()">增加奖项</button>
            </div>
          </div>
        </div>
      </div>
      <div class="module">
        <div class="line">
          <div class="title">参团条件设置</div>
          <div class="content">
            <div class="sec-line">
              <div class="sec-inline">
                <div class="sec-inline-title">成团人数</div>
                <div class="sec-inline-content"><input type="text" class="form-control" name="number" [(ngModel)]="addPennyParams.number" required></div>
              </div>
              <div class="sec-inline">
                <div class="sec-inline-title">参团价格</div>
                <div class="sec-inline-content"><input type="text" class="form-control" name="price" [(ngModel)]="addPennyParams.price"></div>
              </div>
              <div class="sec-inline">
                <div class="sec-inline-title">单人参与次数</div>
                <div class="sec-inline-content"><input type="text" class="form-control" name="round" [(ngModel)]="addPennyParams.round" required></div>
              </div><br>
              <div class="sec-inline">
                <input type="checkbox" [checked]="addPennyParams.new_offer" (change)="checkedNew('new_offer')" id="isNew"><label for="isNew">是否新人参团</label>
              </div>
              <div class="sec-inline" style="display: none">
                <input type="checkbox" [checked]="addPennyParams.new_open_group" (change)="checkedNew('new_open_group')" id="isNewOpen"><label for="isNewOpen">是否新人开团</label>
              </div>
            </div>
          </div>
        </div>
        <div class="line">
          <div class="title">有效期限</div>
          <div class="content">
            <div class="sec-line">
              <div class="sec-inline width-control">
                <div class="sec-inline-title">开始时间</div>
                <div class="sec-inline-content"><input type="date" class="form-control" name="start_date" placeholder="{{curDate}}" [(ngModel)]="addPennyParams.start_date" min="{{curDate}}" required></div>
              </div>
              <div class="sec-inline width-control">
                <div class="sec-inline-title">结束时间</div>
                <div class="sec-inline-content"><input type="date" class="form-control" name="end_date" placeholder="{{curDate}}" [(ngModel)]="addPennyParams.end_date" min="{{curDate}}" required></div>
              </div>
            </div>
          </div>
        </div>
        <div class="line">
          <div class="title">拼团有效期限</div>
          <div class="content">
            <div class="sec-line">
              <div class="sec-inline">
                <div class="sec-inline-title">
                  <input type="text" class="form-control input-width" value="24小时" disabled>
                  <span class="prompt">（团长开团以后，在此有效期内，若组团失败，团员支付的钱，需退回）</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="line">
          <div class="title">开奖最小团数</div>
          <div class="content">
            <div class="sec-line">
              <div class="sec-inline-title">
                <input type="text" class="form-control input-width" name="min_awards" [(ngModel)]="addPennyParams.min_awards" required>
                <span class="prompt">（活动成团数大于开奖最小团数才开奖成功，不然开奖失败）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
    <div class="mt10 text-center">
      <button class="btn btn-success" [disabled]="!createPennyForm.form.valid" (click)="addPenny()">确 定</button>
      <button class="btn btn-default" (click)="createPennyForm.form.reset()">重 置</button>
    </div>
  </div>

  <div *ngIf="status === '未开始'">
    <table class="table">
      <thead>
        <tr>
          <th>活动名称</th>
          <th>商品</th>
          <th>商品ID</th>
          <th>库存</th>
          <th>成团人数</th>
          <th>拼团单价</th>
          <th>时间段</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of activityList">
          <td title="{{item.id}}">{{item.name}}</td>
          <td>
            <img src="{{aliyunOssOutputUrl+'/'+item.activity_goods[0].goods.first_picture}}" alt="">
            <span class="goods-name">
              <span class="goods-name-omit" title="{{item.name}}">{{item.activity_goods[0].goods_name}}</span>
            </span>
          </td>
          <td>{{item.activity_goods[0].goods_id}}</td>
          <td>{{item.activity_goods[0].activity_goods_sku[0].goods_sku.in_stock}}</td>
          <td>{{item.activity_goods[0].number}}</td>
          <td>{{item.activity_goods[0].activity_goods_sku[0]?.price/1000||0}}</td>
          <td>{{item.start_date}}至<br>{{item.end_date}}</td>
          <td>
            <a href="javascript:;" (click)="editSpellPage(item)">编辑</a>
            <a href="javascript:;" (click)="delSpell(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="text-center">
      <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage" [maxSize]="5"
                  previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
    </div>
  </div>

  <div *ngIf="status === '进行中'">
    <table class="table">
      <thead>
      <tr>
        <th>活动名称</th>
        <th>商品</th>
        <th>商品ID</th>
        <th>库存</th>
        <th>成团人数</th>
        <th>拼团单价</th>
        <th>分享次数</th>
        <th>参团人数</th>
        <th>开团数量</th>
        <th>成团个数</th>
        <th>时间段</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of activityList">
          <td title="{{item.id}}">{{item.name}}</td>
          <td>
            <img src="{{aliyunOssOutputUrl+'/'+item.activity_goods[0].goods.first_picture}}" alt="">
            <span class="goods-name">
              <span class="goods-name-omit" title="{{item.name}}">{{item.activity_goods[0].goods_name}}</span>
            </span>
          </td>
          <td>{{item.activity_goods[0].goods_id}}</td>
          <td>{{item.activity_goods[0].activity_goods_sku[0].goods_sku.in_stock}}</td>
          <td>{{item.activity_goods[0].number}}</td>
          <td>{{item.activity_goods[0].activity_goods_sku[0]?.price/1000||0}}</td>
          <td>{{item.activity_report?.activity_share_num||0}}</td>
          <td>{{item.activity_report?.activity_member_num||0}}</td>
          <td>{{item.shopping_info.total||0}}</td>
          <td>{{item.shopping_info.over||0}}</td>
          <td>{{item.start_date}}至<br>{{item.end_date}}</td>
          <td>
            <a href="javascript:;" (click)="editSpellPage(item)">编辑</a>
            <a *ngIf="item.status === '暂停'" href="javascript:;" (click)="changeStatus(item.id, item.status)">正常</a>
            <a *ngIf="item.status === '正常'" href="javascript:;" (click)="changeStatus(item.id, item.status)">暂停</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="text-center">
      <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage" [maxSize]="5"
                  previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
    </div>
  </div>

  <div *ngIf="status === '已结束'">
    <table class="table">
      <thead>
      <tr>
        <th>活动名称</th>
        <th>商品</th>
        <th>商品ID</th>
        <th>成团人数</th>
        <th>拼团单价</th>
        <th>时间段</th>
        <th>分享次数</th>
        <th>参团人数</th>
        <th>开团数量</th>
        <th>拼团成功个数</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of activityList">
          <td title="{{item.id}}">{{item.name}}</td>
          <td>
            <img src="{{aliyunOssOutputUrl+'/'+item.activity_goods[0].goods.first_picture}}" alt="">
            <span class="goods-name">
              <span class="goods-name-omit" title="{{item.name}}">{{item.activity_goods[0].goods_name}}</span>
            </span>
          </td>
          <td>{{item.activity_goods[0].goods_id}}</td>
          <td>{{item.activity_goods[0].number}}</td>
          <td>{{item.activity_goods[0].activity_goods_sku[0].price/1000}}</td>
          <td>{{item.start_date}}至<br>{{item.end_date}}</td>
          <td>{{item.activity_report?.activity_share_num||0}}</td>
          <td>{{item.activity_report?.activity_member_num||0}}</td>
          <td>{{item.shopping_info.total||0}}</td>
          <td>{{item.shopping_info.over||0}}</td>
          <td>
            <a href="javascript:;" (click)="createSpellAgain(item)">重新开团</a><br>
            <a href="javascript:;" (click)="getPrizeWinner(item.id)">中奖详情</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="text-center">
      <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage" [maxSize]="5"
                  previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
    </div>
  </div>
</div>

<div *ngIf="editSpell">
  <div class="edit-red"><i class="iconfont icon-jinggao"></i>此页面可进行编辑</div>
  <form #editPennyForm="ngForm">
    <div class="module">
      <div class="line">
        <div class="title">活动名称</div>
        <div class="content">
          <input type="text" class="form-control input-width" name="activity_name" *ngIf="status == '未开始'" [(ngModel)]="editPennyParams.name" required>
          <input type="text" class="form-control input-width" name="activity_name" *ngIf="status == '进行中'" [(ngModel)]="editPennyParams.name" required>
        </div>
      </div>
      <div class="line" *ngFor="let item of editPrize;let i = index;">
        <div class="title">奖品设置
          <div *ngIf="i+1==editPrize.length&&editPrize.length!=1&&status == '未开始'">
            <button class="btn btn-default" (click)="editPrize.splice(i,1)">删除</button>
          </div>
        </div>
        <div class="content">
          <div class="sec-line">
            <div class="sec-title">{{item.class}} :</div>
            <div class="sec-content" *ngIf="!item.type">
              <a href="javascript:;" class="add-goods" (click)="showPrizeModal(i)">
                <i class="iconfont icon-add"></i>添加奖品
              </a>
            </div>
            <div class="sec-content" *ngIf="item.type===1&&!!item.goods">
              <a href="javascript:;" class="add-goods" *ngIf="status == '未开始'" (click)="showPrizeModal(i)">
                <img src="{{item.goods?aliyunOssOutputUrl+'/'+item.goods.first_picture:''}}" alt="">
                <span>{{item.goods?.name}}</span>
              </a>
              <a href="javascript:;" class="add-goods" *ngIf="status == '进行中'">
                <img src="{{item.goods?aliyunOssOutputUrl+'/'+item.goods.first_picture:''}}" alt="">
                <span>{{item.goods?.name}}</span>
              </a>
            </div>
            <div class="sec-content" *ngIf="item.type===2 && !!item.coupon">
              <a href="javascript:;" class="add-coupon" *ngIf="status == '未开始'" (click)="showPrizeModal(i)">
                <span class="type">卡券:</span>
                <span>ID: {{item.coupon?.id}}</span>
                <span>名称: {{item.coupon?.card_coupons_name}}</span>
                <span>有效期:
                  <span *ngIf="item.coupon.term_of_validity_type === 1">{{item.coupon.term_of_validity_time_start.substring(0,10)}}至{{item.coupon.term_of_validity_time_end.substring(0,10)}}</span>
                  <span *ngIf="item.coupon.term_of_validity_type === 2">领取{{item.coupon.term_of_validity_start}}天后生效 有效期{{item.coupon.term_of_validity}}天</span>
                </span>
              </a>
              <a href="javascript:;" class="add-coupon" *ngIf="status == '进行中'">
                <span class="type">卡券:</span>
                <span>ID: {{item.coupon?.id}}</span>
                <span>名称: {{item.coupon?.card_coupons_name}}</span>
                <span>有效期:
                  <span *ngIf="item.coupon.term_of_validity_type === 1">{{item.coupon.term_of_validity_time_start.substring(0,10)}}至{{item.coupon.term_of_validity_time_end.substring(0,10)}}</span>
                  <span *ngIf="item.coupon.term_of_validity_type === 2">领取{{item.coupon.term_of_validity_start}}天后生效 有效期{{item.coupon.term_of_validity}}天</span>
                </span>
              </a>
            </div>
          </div>
          <div class="sec-line" *ngIf="item.type === 1">
            <div class="sec-title">规格 :</div>
            <div class="sec-content" *ngIf="status == '未开始'">
              <span class="sku" *ngFor="let ite of item.goods_sku" title="{{ite.describe||ite.name}}" (click)="checkedSku(item.goods_sku,ite)">  <input type="radio" name="sku_radio[{{i}}]" [checked]="ite.selected">{{ite.describe||ite.name}}</span>
            </div>
            <div class="sec-content" *ngIf="status == '进行中'">
              <span class="sku" *ngFor="let ite of item.goods_sku" title="{{ite.describe||ite.name}}">  <input type="radio" name="sku_radio[{{i}}]" [checked]="ite.selected" disabled>{{ite.describe||ite.name}}</span>
            </div>
          </div>
          <div class="sec-line">
            <div class="sec-title">数量 :</div>
            <div class="sec-content" *ngIf="status == '未开始'">
              <input type="number" class="form-control" name="number[{{i}}]" [(ngModel)]="item.number" required>
            </div>
            <div class="sec-content" *ngIf="status == '进行中'">
              <input type="number" class="form-control" name="number[{{i}}]" [(ngModel)]="item.number" disabled required>
            </div>
          </div>
          <div class="sec-line" *ngIf="i+1==editPrize.length && editPrize.length!=5 && status == '未开始'">
            <button class="btn btn-default mt10" (click)="addAwards()">增加奖项</button>
          </div>
        </div>
      </div>
    </div>
    <div class="module">
      <div class="line">
        <div class="title">参团条件设置</div>
        <div class="content">
          <div class="sec-line">
            <div class="sec-inline">
              <div class="sec-inline-title">成团人数</div>
              <div class="sec-inline-content">
                <input type="text" class="form-control" name="number" *ngIf="status == '未开始'" [(ngModel)]="editPennyParams.number" required>
                <input type="text" class="form-control" name="number" *ngIf="status == '进行中'" [(ngModel)]="editPennyParams.number" disabled required>
              </div>
            </div>
            <div class="sec-inline">
              <div class="sec-inline-title">参团价格</div>
              <div class="sec-inline-content" *ngIf="status == '未开始'"><input type="text" class="form-control" name="price" [(ngModel)]="editPennyParams.price" required></div>
              <div class="sec-inline-content" *ngIf="status == '进行中'" ><input type="text" class="form-control" name="price" value="{{editPennyParams.price}}" disabled></div>
            </div>
            <div class="sec-inline">
              <div class="sec-inline-title">单人参与次数</div>
              <div class="sec-inline-content">
                <input type="text" class="form-control" name="round" *ngIf="status == '未开始'" [(ngModel)]="editPennyParams.round" required>
                <input type="text" class="form-control" name="round" *ngIf="status == '进行中'" [(ngModel)]="editPennyParams.round" disabled required>
              </div>
            </div><br>
            <div class="sec-inline">
              <input type="checkbox" [checked]="editPennyParams.new_offer" id="editIsNew" disabled><label for="editIsNew">是否新人参团</label>
            </div>
            <div class="sec-inline" style="display: none">
              <input type="checkbox" [checked]="editPennyParams.new_open_group" id="editIsNewOpen" disabled><label for="editIsNewOpen">是否新人开团</label>
            </div>
          </div>
        </div>
      </div>
      <div class="line">
        <div class="title">有效期限</div>
        <div class="content">
          <div class="sec-line">
            <div class="sec-inline width-control">
              <div class="sec-inline-title">开始时间</div>
              <div class="sec-inline-content">
                <input type="date" class="form-control" name="start_date" placeholder="{{curDate}}" *ngIf="status == '未开始'" [(ngModel)]="editPennyParams.start_date" min="{{curDate}}" required>
                <input type="date" class="form-control" name="start_date" placeholder="{{curDate}}" *ngIf="status == '进行中'" [(ngModel)]="editPennyParams.start_date" disabled required>
              </div>
            </div>
            <div class="sec-inline width-control">
              <div class="sec-inline-title">结束时间</div>
              <div class="sec-inline-content"><input type="date" class="form-control" name="end_date" placeholder="{{curDate}}" [(ngModel)]="editPennyParams.end_date" min="{{curDate}}" required></div>
            </div>
          </div>
        </div>
      </div>
      <div class="line">
        <div class="title">拼团有效期限</div>
        <div class="content">
          <div class="sec-line">
            <div class="sec-inline">
              <div class="sec-inline-title">
                <input type="text" class="form-control input-width" value="24小时" disabled>
                <span class="prompt">（团长开团以后，在此有效期内，若组团失败，团员支付的钱，需退回）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="line">
        <div class="title">开奖最小团数</div>
        <div class="content">
          <div class="sec-line">
            <div class="sec-inline-title">
              <input type="text" class="form-control input-width" name="min_awards" [(ngModel)]="editPennyParams.min_awards" required>
              <span class="prompt">（活动成团数大于开奖最小团数才开奖成功，不然开奖失败）</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
  <div class="mt10 text-center">
    <button class="btn btn-success" [disabled]="!editPennyForm.form.valid" (click)="editPenny()">确 定</button>
    <button class="btn btn-default" (click)="editSpell = false;">取 消</button>
  </div>
</div>

<!-- 添加商品 -->
<div bsModal #addPrizeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">添加商品</h4>
        <div class="text-center">
          <div class="ui-radio" [class.ui-radioed]="prizeType === 1" (click)="changePrizeType(1)"><i
            class="iconfont icon-iconfontradiobox"></i><span>商品</span>
            <input type="radio" name="" value="">
          </div>
          <div class="ui-radio" [class.ui-radioed]="prizeType === 2" (click)="changePrizeType(2)" *ngIf="canSetCoupon"><i
            class="iconfont icon-iconfontradiobox"></i><span>卡券</span>
            <input type="radio" name="" value="">
          </div>
        </div>
        <button type="button" class="close pull-right button-close" aria-label="Close" (click)="addPrizeModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" *ngIf="prizeType === 1">
        <div class="search-line">
          <input type="text" class="form-control" placeholder="按商品名称搜索" name="keyWordDlg" [(ngModel)]="keyWordDlg">
          <select class="form-control" name="groupDlg" [(ngModel)]="groupIdDlg">
            <option value="0">全部商品</option>
            <option *ngFor="let item of groupList" value="{{item.id}}">{{item.name}}</option>
          </select>
          <div class="pull-right">
            <button class="btn btn-default" (click)="searchDlg()">搜索</button>
            <button class="btn" (click)="resetDlg()">重置</button>
          </div>
        </div>
        <div class="table-title">
          <span class="col-md-2">商品分类</span>
          <span class="col-md-2">商品图片</span>
          <span class="col-md-2">商品名称</span>
          <span class="col-md-2">库存量</span>
          <span class="col-md-3">创建时间</span>
          <span class="col-md-1"></span>
        </div>
        <div class="table-items" *ngFor="let item of goodsListDlg">
          <span class="col-md-2 omit"><span class="mr-5" *ngFor="let item2 of item.goods_category">{{item2.name}}</span></span>
          <span class="col-md-2"><img src="{{item.first_picture?aliyunOssOutputUrl+'/'+item.first_picture:''}}" alt=""></span>
          <span class="col-md-2" title="{{item.name}}">{{item.name}}</span>
          <span class="col-md-2">{{item.in_stock}}</span>
          <span class="col-md-3">{{item.created_at}}</span>
          <span class="col-md-1" (click)="checkedPrize(item, 1)"><a href="javascript:;">选择</a></span>
        </div>
      </div>
      <div class="modal-body" *ngIf="prizeType === 2&& canSetCoupon">
        <div class="search-line">
          <input type="text" class="form-control" placeholder="请输入卡券名称" name="coupon_name" [(ngModel)]="coupon_name">
          <div class="pull-right">
            <button class="btn btn-default" (click)="searchDlg()">搜索</button>
          </div>
        </div>
        <table class="table">
          <thead>
          <tr>
            <th>ID</th>
            <th>卡券名称</th>
            <th>卡券有效期</th>
            <th>卡券原始库存</th>
            <th>卡券剩余库存</th>
            <th>卡券核销量</th>
            <th>备注信息</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of cardList">
            <td>{{item.id}}</td>
            <td>{{item.card_coupons_name}}</td>
            <td *ngIf="item.term_of_validity_type === 1">{{item.term_of_validity_time_start.substring(0,10)}}至{{item.term_of_validity_time_end.substring(0,10)}}</td>
            <td *ngIf="item.term_of_validity_type === 2">领取{{item.term_of_validity_start}}天后生效 有效期{{item.term_of_validity}}天</td>
            <td *ngIf="item.in_stock_type === 0">不限</td>
            <td *ngIf="item.in_stock_type === 1">{{item.in_stock}}</td>
            <td>{{item.remain}}</td>
            <td>{{item.card_coupons_used_report?.used_total}}</td>
            <td>{{item.remark}}</td>
            <td>
              <span>
                <a href="javascript:;" (click)="checkedPrize(item, 2);">选择</a>
              </span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="model-footer text-center">
          <pagination (pageChanged)="dlgPageChanged($event)" [totalItems]="totalItemsDlg" [itemsPerPage]="itemsPerPageDlg" [(ngModel)]="currentPageDlg"  [maxSize]="5"
                      previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
      </div>
    </div>
  </div>
</div>

<!-- 选择卡券 -->
<div bsModal #addCouponModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">选择卡券</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addCouponModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="search-line">
          <input type="text" class="form-control" placeholder="请输入卡券名称" name="coupon_name" [(ngModel)]="coupon_name">
          <div class="pull-right">
            <button class="btn btn-default" (click)="searchDlg()">搜索</button>
          </div>
        </div>
        <table class="table">
          <thead>
          <tr>
            <th>ID</th>
            <th>卡券名称</th>
            <th>卡券有效期</th>
            <th>卡券原始库存</th>
            <th>卡券剩余库存</th>
            <th>卡券核销量</th>
            <th>备注信息</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of cardList">
            <td>{{item.id}}</td>
            <td>{{item.card_coupons_name}}</td>
            <td *ngIf="item.term_of_validity_type === 1">{{item.term_of_validity_time_start.substring(0,10)}}至{{item.term_of_validity_time_end.substring(0,10)}}</td>
            <td *ngIf="item.term_of_validity_type === 2">领取{{item.term_of_validity_start}}天后生效 有效期{{item.term_of_validity}}天</td>
            <td *ngIf="item.in_stock_type === 0">不限</td>
            <td *ngIf="item.in_stock_type === 1">{{item.in_stock}}</td>
            <td>{{item.remain}}</td>
            <td>{{item.card_coupons_used_report?.used_total}}</td>
            <td>{{item.remark}}</td>
            <td>
              <span>
                <a href="javascript:;" (click)="checkedCoupon = item;addCouponModal.hide();">确定选择</a>
              </span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="model-footer">
        <div class="text-center">
          <pagination (pageChanged)="dlgPageChanged($event)" [totalItems]="totalItemsDlg" [itemsPerPage]="itemsPerPageDlg" [(ngModel)]="currentPageDlg"  [maxSize]="5"
                      previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 是否确认删除弹框 -->
<div class="modal fade" bsModal #delModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="delModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        是否确认删除
      </div>
      <div class="modal-footer mt20">
        <button class="btn btn-default btn-md-long" type="button" (click)="delModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="submit" (click)="submitDelActivity()">确定</button>
      </div>
    </div>
  </div>
</div>

<!-- 是否确认暂停/恢复活动弹框 -->
<div class="modal fade" bsModal #changeStatusModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="changeStatusModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center" *ngIf="activityStatus === '正常'">
        暂停以后，该商品将不在货架上显示，确定要暂停活动吗？
      </div>
      <div class="modal-body text-center" *ngIf="activityStatus === '暂停'">
        确定要恢复活动吗？
      </div>
      <div class="modal-footer mt20">
        <button class="btn btn-default btn-md-long" type="button" (click)="changeStatusModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="submit" (click)="confirmChangeStatus()">确定</button>
      </div>
    </div>
  </div>
</div>

<!-- 获取中奖详情 -->
<div class="modal fade" bsModal #prizeWinnerModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">中奖详情</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="prizeWinnerModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div *ngFor="let item of winnerInfo;let i = index;">
          <div class="text-center" *ngIf="i == 0">一等奖中奖名单</div>
          <div class="text-center" *ngIf="i == 1">二等奖中奖名单</div>
          <div class="text-center" *ngIf="i == 2">三等奖中奖名单</div>
          <div class="winner-item" *ngFor="let ite of item.info">
            <span class="winner-name">
              <img src="{{ite.img?ite.img:'../../../../../assets/images/main-header-default.png'}}" alt="">
              <span>{{ite.name||'null'}}</span>
            </span>
            <span class="winner-order">
              订单编号:{{ite.order_no}}
            </span>
          </div>
        </div>
      </div>
      <div class="modal-footer text-center">
        <button class="btn btn-default btn-md-long" type="button" (click)="prizeWinnerModal.hide()">关 闭</button>
      </div>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="isShow = $event;"></app-notification>
